<template>
  <div class="body">

    <div class="ser_div">
      <el-row>
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 名称 </el-col>
            <el-col :span="16">
              <el-input v-model="ser.name"></el-input>
            </el-col>
          </el-row>
        </el-col>
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 产品 </el-col>
            <el-col :span="16">
              <el-select filterable v-model="ser.product_id" @change="product_id_change" placeholder="请选择产品"
                style="width: 100%">
                <el-option v-for="(item, index) in productList" :key="index" :label="item.product_name" :value="item.id">
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 型号 </el-col>
            <el-col :span="16">
              <el-select filterable v-model="ser.model_number_id" placeholder="请选择型号" @change="model_number_id_change(1)"
                style="width: 100%">
                <el-option v-for="(item, index) in ModelNumberList" :key="index" :label="item.model_number"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 规格 </el-col>
            <el-col :span="16">
              <el-select filterable v-model="ser.specification_id" placeholder="请选择规格" style="width: 100%">
                <el-option v-for="(item, index) in SpecificationList_w" :key="index"
                  :label="item.specification.specification" :value="item.specification.id">
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>

        <el-col>
          <el-button @click="set_wuliao" class="add_btn">新增物料清单</el-button>
          <el-button @click="search()" class="add_btn" icon="el-icon-search">查询</el-button>
          <el-button @click="searchreset" icon="el-icon-refresh" class="add_btn">重置</el-button>
          <!-- <el-button @click="search(2)" icon="el-icon-plus" class="add_btn"></el-button> -->
        </el-col>
      </el-row>
    </div>


    <el-table :data="datalist" v-loading="loading" border>
      <el-table-column type="expand">
        <template slot-scope="propss">
          <el-table :data="propss.row.child">
            <el-table-column  label="材料">
               <template slot-scope="scope">
                 {{ scope.row.material.name}}
               </template>
            </el-table-column>
            <el-table-column label="用量">
              <template slot-scope="scope">
                {{ scope.row.dosage}}
              </template>
            </el-table-column>
              <!-- <el-table-column  label="型号">
                <template slot-scope="scope">
                  {{ scope.row.material.supply_model_number}}
                </template>
             </el-table-column>
             <el-table-column  label="规格">
                <template slot-scope="scope">
                  {{ scope.row.material.specification}}
                </template>
             </el-table-column> -->
            
          </el-table>
          <el-table :data="propss.row.self_product_arr">
            <el-table-column  label="半成品材料">
               <template slot-scope="scope">
                 {{ scope.row.name}}
               </template>
            </el-table-column>
            <el-table-column label="半成品用量">
              <template slot-scope="scope">
                {{ scope.row.self_product_number}}
              </template>
            </el-table-column>
              <!-- <el-table-column  label="型号">
                <template slot-scope="scope">
                  {{ scope.row.material.supply_model_number}}
                </template>
             </el-table-column>
             <el-table-column  label="规格">
                <template slot-scope="scope">
                  {{ scope.row.material.specification}}
                </template>
             </el-table-column> -->
            
          </el-table>
        </template>
      </el-table-column>
      <el-table-column prop="id" label="名称">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column prop="id" label="产品">
        <template slot-scope="scope">
          {{ scope.row.product ? scope.row.product.product_name : "" }}
        </template>
      </el-table-column>
      <el-table-column prop="id" label="型号">
        <template slot-scope="scope">
          {{
            scope.row.model_number ? scope.row.model_number.model_number : ""
          }}
        </template>
      </el-table-column>
      <el-table-column prop="id" label="颜色">
        <template slot-scope="scope">
          {{ scope.row.color ? scope.row.color.color : "" }}
        </template>
      </el-table-column>
      <el-table-column prop="id" label="规格">
        <template slot-scope="scope">
          {{
            scope.row.specification ? scope.row.specification.specification : ""
          }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="260" fixed="right">
        <template slot-scope="scope">
          <el-button @click="set_wuliao(scope.row)" type="text" icon="el-icon-edit">编辑</el-button>
          <!-- <el-popconfirm
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                  icon="el-icon-info"
                  icon-color="red"
                  title="是否删除这条数据？"
                  @confirm="del_wuliao(scope.row)"
                >
                  <el-button slot="reference" type="text" icon="el-icon-delete">
                    删除</el-button
                  >
                </el-popconfirm> -->
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background @prev-click="prev"
        @next-click="next" :current-page.sync="pagination.page" :page-size="pagination.per_page"
        layout="total, prev, pager, next" :total="total">
      </el-pagination>
    </div>

    <el-dialog :title="title" :visible.sync="isProduct" width="60%" :close-on-click-modal="false" @close="close_dialogs">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm">
        <div class="ulss">
          <div class="lis">
            <el-form-item label="清单名称" prop="name">
              <el-input v-model="ruleForm.name" @input="changeValue"></el-input>
            </el-form-item>
          </div>
          <div class="lis">
            <el-form-item label="产品" prop="product_id">
              <el-select v-model="ruleForm.product_id" filterable @change="product_id_change" placeholder="请选择产品"
                style="width: 100%">
                <el-option v-for="(item, index) in productList" :key="index" :label="item.product_name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="lis">
            <el-form-item label="型号" prop="model_number_id">
              <el-select filterable v-model="ruleForm.model_number_id" @change="model_number_id_change(2)"
                placeholder="请选择型号" style="width: 100%">
                <el-option v-for="(item, index) in ModelNumberList" :key="index" :label="item.model_number"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="lis">
            <el-form-item label="规格" prop="specification_id">
              <el-select filterable v-model="ruleForm.specification_id" placeholder="请选择规格" style="width: 100%">
                <el-option v-for="(item, index) in SpecificationList_n" :key="index"
                  :label="item.specification" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="lis">
            <el-form-item label="颜色">
              <el-select filterable v-model="ruleForm.color_id" placeholder="请选择颜色" style="width: 100%">
                <el-option v-for="(item, index) in ColorList" :key="index" :label="item.color" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="lis">
            <el-form-item label="材料">
              <el-select filterable allow-create multiple v-model="material_ids" placeholder="请选择材料" style="width: 100%"
                @change="material_ids_change">
                <el-option v-for="(item, index) in MaterialList" :key="index" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <div v-for="(item, index) in ruleForm.dosage_arr" :key="index">
          <el-row>
            <el-col :span="12">
              <el-form-item label="材料" prop="material_id">
                <el-select filterable allow-create disabled v-model="item.material_id" placeholder="请选择材料"
                  style="width: 100%">
                  <el-option v-for="(item, index) in MaterialList" :key="index" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="用量" prop="dosage">
                <el-input v-model="item.dosage"></el-input>
              </el-form-item>
            </el-col>
            <!-- <el-col  :span="5" style="text-align: right;">
              <el-button type="primary" @click="add_dosage_arr" v-if="index==(ruleForm.dosage_arr.length-1)">添加</el-button>
              <el-button type="danger" @click="del_dosage_arr(index)" v-if="index!=0" style="margin-left: 10px;">删除</el-button>
            </el-col> -->
          </el-row>
        </div>
        <!-- <div class="ulss">
          <div class="lis">
            <el-form-item label="半成品">
              <el-select filterable allow-create multiple v-model="self_product" placeholder="请选择材料" style="width: 100%"
                @change="self_product_change">
                <el-option v-for="(item, index) in selfProductLsit" :key="index" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <div v-for="(item, index) in ruleForm.self_product_arr" :key="index">
          <el-row>
            <el-col :span="12">
              <el-form-item label="半成品名" prop="self_product_id">
                <el-select filterable allow-create disabled v-model="item.self_product_id" placeholder="请选择材料"
                  style="width: 100%">
                  <el-option v-for="(item, index) in selfProductLsit" :key="index" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="半成品用量" prop="self_product_number">
                <el-input v-model="item.self_product_number" @chage="chage_input(e,index)"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close_dialog">取 消</el-button>
        <el-button type="primary" @click="add_ruleForm('ruleForm')">确定</el-button>
      </span>
    </el-dialog>

    <!-- <el-dialog
      :title="title"
      :visible.sync="isProducts"
      width="60%"
      :close-on-click-modal="false"
      @close="close_dialogs"
    >
       <el-input v-model="dosage"></el-input>
       <span slot="footer" class="dialog-footer">
        <el-button @click="close_dialog">取 消</el-button>
        <el-button type="primary" @click="add_ruleForm('ruleForm')"
          >确定</el-button
        >
      </span>
    </el-dialog>  -->
  </div>
</template>

<script>
import {
  getMaterialBillList,
  getMaterialList,
  createMaterialBill,
  getProductList,
  getModelNumberList,
  getProductColorList,
  getSpecificationList,
  getSelfProductList
} from "@/api/product/index";
export default {
  data() {
    return {
      ser: {
        product_id: '',
        model_number_id: '',
        specification_id: '',
        name: ''
      },
      datalist: [],
      loading: true,
      title: "",
      isProduct: false,
      pagination: {
        per_page: 100,
        page: 1,
      },
      total: 0,
      ruleForm: {
        id: "",
        name: "",
        product_id: "",
        model_number_id: "",
        specification_id: "",
        color_id: "",
        dosage_arr: [],
        self_product_arr:[]
      },
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        product_id: [
          { required: true, message: "请选择产品", trigger: "blur" },
        ],
        model_number_id: [
          { required: true, message: "请选择型号", trigger: "blur" },
        ],
        specification_id: [
          { required: true, message: "请选择规格", trigger: "blur" },
        ],
        color_id: [{ required: true, message: "请选择颜色", trigger: "blur" }],
      },
      material_ids: [],
      productList: [],
      ModelNumberList: [],
      ColorList: [],
      SpecificationList_n: [],
      SpecificationList_w:[],
      MaterialList: [],
      self_product:[],
      selfProductLsit:[]
    };
  },
  mounted() {
    this.getlist();
    this.get_ProductList();
  },
  watch: {
    "ruleForm.product_id"(news, olds) {
      if (news) {
        this.product_id_changes(news)
      }
    },
    "ruleForm.model_number_id"(news, olds) {
      this.model_number_id_change()
    },
  },
  methods: {
    search() {
      this.getlist();
    },
    searchreset() {
      this.ser = {
        product_id: '',
        model_number_id: '',
        specification_id: '',
        name: ''
      }
      this.getlist();

    },
    chage_input(e,val){
      console.log(e,val)
    },
    changeValue(e) {
      this.$forceUpdate()
    },
    material_ids_change() {
      this.ruleForm.dosage_arr = [];
      this.material_ids.forEach((item) => {
        let obj = {
          material_id: item,
          dosage: "",
        };
        this.ruleForm.dosage_arr.push(obj);
      });
    },
    self_product_change() {
      this.ruleForm.self_product_arr = [];
      this.self_product.forEach((item) => {
        let obj = {
          self_product_id: item,
          self_product_number: "",
        };
        this.ruleForm.self_product_arr.push(obj);
        console.log(this.ruleForm.self_product_arr,"this.ruleForm.self_product_arr")
      });
    },
    add_dosage_arr() {
      let obj = {
        material_id: "",
        dosage: "",
      };
      this.ruleForm.dosage_arr.push(obj);
    },
    del_dosage_arr(index) {
      this.ruleForm.dosage_arr.splice(index, 1);
    },
    get_MaterialList(id) {
      getMaterialList({ per_page: 99999, product_id: id }).then((res) => {
        if (res.code == 200) {
          this.MaterialList = res.data.data;
        }
      });
    },
    product_id_changes(val) {
      this.ModelNumberList = [];
      this.ColorList = [];
      this.SpecificationList = [];

      this.get_producModel(val);
      this.get_ColorListlist(val);
      this.get_MaterialList(val);
    },
    product_id_change(val) {
      console.log(val);
      this.ModelNumberList = [];
      this.ColorList = [];
      this.SpecificationList = [];
      this.ser.model_number_id = ''
      this.ser.specification_id = ''
      this.ruleForm.model_number_id = "";
      this.ruleForm.color_id = "";
      this.ruleForm.specification_id = "";
      this.get_producModel(val);
      this.get_ColorListlist(val);
      this.produc_number_id = val;
      this.get_MaterialList(val);
    },
    get_ProductList() {
      getProductList({ per_page: 99999 }).then((res) => {
        if (res.code == 200) {
          this.productList = res.data.data;
        }
      });
    },
    get_producModel(id) {
      getModelNumberList({
        product_id: id,
        field_list: "id,model_number",
        is_dropdown: 1,
      }).then((res) => {
        if (res.code == 200) {
          this.ModelNumberList = res.data.data;
        }
      });
    },
    // 颜色
    get_ColorListlist(id) {
      getProductColorList({ product_id: id }).then((res) => {
        if (res.code == 200) {
          this.ColorList = res.data;
        }
      });
    },
    model_number_id_change(type) {
      if (type===1) {
        let obj = {
          product_id: this.ser.product_id,
          model_number_id: this.ser.model_number_id,
        };
        getSpecificationList(obj).then((res) => {
          if (res.code == 200) {
            if(type===1){
              this.ser.specification_id = ''
            }
            this.SpecificationList_w = res.data.data;
          }
        });

      } else {
        let obj = {
          product_id: this.ruleForm.product_id,
          model_number_id: this.ruleForm.model_number_id,
        };
        getSpecificationList(obj).then((res) => {
          if (res.code == 200) {
            if(type===2){
              this.ruleForm.specification_id = ''
            }
            this.SpecificationList_n = res.data.data;
          }
        });

      }


    },
    del_wuliao(row) {
      delMaterial({ id: row.id, is_del: 1 }).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "删除成功",
          });
          this.getlist();
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    close_dialogs() {
      this.ruleForm = {
        id: "",
        product_id: "",
        model_number_id: "",
        specification_id: "",
        color_id: "",
        dosage_arr: [],
        self_product_arr: []
      };
      this.self_product =  [];
      this.material_ids = [];
    },
    close_dialog() {
      this.self_product= []
      this.isProduct = false;
    },
    add_ruleForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          createMaterialBill(this.ruleForm).then((res) => {
            if (res.code == 200) {
              this.isProduct = false;
              this.$message.success("提交成功");
              this.getlist();

              this.close_dialogs()
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    set_wuliao(row) {
      console.log(row.specification);
      if (row.id) {
        // this.$set(this.ruleForm.id,row.id)
        // this.$set(this.ruleForm.name,row.name)

        this.ruleForm.id = row.id;
        this.ruleForm.name = row.name;
        this.ruleForm.product_id = row.product_id;
        console.log(this.ruleForm.model_number_id)
        this.ruleForm.model_number_id = row.model_number_id;
        this.ruleForm.specification_id = row.specification.id;
        this.ruleForm.color_id = row.color_id;

        row.child.forEach(item => {
          let obj = {
            material_id: item.material.id,
            dosage: item.dosage
          };
          console.log(this.ruleForm)
          this.ruleForm.dosage_arr.push(obj);
          this.material_ids.push(item.material.id)
        })
        row.self_product_arr.forEach(item => {
          let obj = {
            self_product_id: item.self_product_id,
            self_product_number: item.self_product_number,
          };
          this.ruleForm.self_product_arr.push(obj);
          this.self_product.push(item.self_product_id)
        })

        console.log(this.ruleForm);
        // this.ruleForm.dosage = row.dosage;
        this.get_ProductList();

        this.title = "编辑物料清单";
      } else {
        this.title = "新增物料清单";
      }
      getSelfProductList({page:1,per_page:9999}).then((res) => {
          if (res.code == 200) {
            this.selfProductLsit = res.data.data;
          }
        });
      this.isProduct = true;
    },
    getlist() {
      getMaterialBillList({ ...this.pagination, ...this.ser }).then((res) => {
        if (res.code == 200) {
          this.datalist = res.data.data;
          this.total = res.data.total;
          this.loading = false;
        }
      });
    },
    handleSizeChange(val) {
      console.log(val);
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pagination.page = val;
      this.getlist();
    },
    prev() {
      this.pagination.page = this.pagination.page - 1;
      this.getlist();
    },
    next() {
      console.log("ss");
      this.pagination.page = this.pagination.page + 1;
      this.getlist();
    },
    changeValue(e) {
      this.$forceUpdate();
    },
  },
};
</script>

<style scoped>
.ulss {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* .el-form-item {
    margin-bottom: 0;
  } */
</style>
